<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <button @click="changeData">改变数据</button>
    <div>{{num}}</div>
    <div>{{computedNum}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import MyMixin from '@/mixins/MyMixin';

@Component
export default class HelloWorld extends Vue {
  @Prop() private name!: string;
  private num: number = 0;
    // 改变数据
  public changeData(): void {
    const data = Math.floor(Math.random() * 10 + 1);
    this.num = data;
  }
  // 生命周期函数
  private mounted() {
    console.log('组件挂载了');
  }
  // 计算属性
 get computedNum() {
    return 'computed ' + this.num;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
